<template>
  <div class="stat-card" :class="[{ 'is-hover': hover }, type]">
    <div class="stat-card-content">
      <div class="stat-card-icon" :style="{ backgroundColor: iconBgColor }">
        <el-icon :size="24" :color="iconColor">
          <component :is="icon" />
        </el-icon>
      </div>
      <div class="stat-card-info">
        <div class="stat-card-title">{{ title }}</div>
        <div class="stat-card-value">{{ value }}</div>
        <div class="stat-card-desc" v-if="description">
          {{ description }}
          <span v-if="trend" :class="['trend', trendClass]">
            {{ Math.abs(trend) }}%
            <el-icon v-if="trend > 0"><CaretTop /></el-icon>
            <el-icon v-else><CaretBottom /></el-icon>
          </span>
        </div>
      </div>
    </div>
    <div class="stat-card-chart" v-if="$slots.chart">
      <slot name="chart"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number],
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
  },
  trend: {
    type: Number,
    default: null
  },
  hover: {
    type: Boolean,
    default: true
  }
})

// 图标背景色
const iconBgColor = computed(() => {
  const colors = {
    primary: 'rgba(24, 144, 255, 0.1)',
    success: 'rgba(82, 196, 26, 0.1)',
    warning: 'rgba(250, 173, 20, 0.1)',
    danger: 'rgba(245, 34, 45, 0.1)',
    info: 'rgba(144, 147, 153, 0.1)'
  }
  return colors[props.type]
})

// 图标颜色
const iconColor = computed(() => {
  const colors = {
    primary: '#1890ff',
    success: '#52c41a',
    warning: '#faad14',
    danger: '#f5222d',
    info: '#909399'
  }
  return colors[props.type]
})

// 趋势样式
const trendClass = computed(() => {
  if (props.trend === null) return ''
  return props.trend > 0 ? 'trend-up' : 'trend-down'
})
</script>

<style lang="scss" scoped>
.stat-card {
  background: var(--el-bg-color-overlay);
  border-radius: var(--el-border-radius-base);
  padding: 20px;
  transition: var(--el-transition-all);
  box-shadow: var(--el-box-shadow-lighter);
  
  &.is-hover {
    &:hover {
      box-shadow: var(--el-box-shadow-light);
      transform: translateY(-2px);
    }
  }
  
  .stat-card-content {
    display: flex;
    align-items: center;
    
    .stat-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
    }
    
    .stat-card-info {
      flex: 1;
      
      .stat-card-title {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        margin-bottom: 8px;
      }
      
      .stat-card-value {
        font-size: 24px;
        font-weight: bold;
        color: var(--el-text-color-primary);
        margin-bottom: 8px;
      }
      
      .stat-card-desc {
        font-size: 12px;
        color: var(--el-text-color-secondary);
        
        .trend {
          margin-left: 4px;
          
          &.trend-up {
            color: var(--el-color-success);
          }
          
          &.trend-down {
            color: var(--el-color-danger);
          }
        }
      }
    }
  }
  
  .stat-card-chart {
    margin-top: 16px;
    height: 50px;
  }
  
  // 不同类型的样式
  &.primary {
    border-left: 3px solid var(--el-color-primary);
  }
  
  &.success {
    border-left: 3px solid var(--el-color-success);
  }
  
  &.warning {
    border-left: 3px solid var(--el-color-warning);
  }
  
  &.danger {
    border-left: 3px solid var(--el-color-danger);
  }
  
  &.info {
    border-left: 3px solid var(--el-color-info);
  }
}
</style>